<template>
  <div class="list-area">
    <div id="list-area-main">
      <div class="list-item-wrapper" :key="i" v-for="(item, i) in curPageItems">
        <ListItem
          :name="item.name"
          :points="item.points"
          :itemID="item.itemID"
          :itemType="item.itemType"
          :imgUrl="item.imgUrl"
        >
        </ListItem>
      </div>
    </div>
    <div id="list-area-footer" class="block">
      <el-pagination
        :page-sizes="pageSizeOptions"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="numItems"
        :v-model:propName="curPageNum"
        @current-change="onCurrentChange"
        @size-change="onSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { computed, ref, reactive, onMounted } from "vue";
import router from "@/router";
import ListItem from "./ListItem.vue";

export default {
  name: "TextbookShelf",
  components: {
    ListItem,
  },
  props: {
    fnGetIDList: {
      type: Function, // async
    },
    fnGetItem: {
      type: Function, // async
    },
  },
  setup(props, { emit }) {
    // ===============================================
    // data
    // ===============================================
    let curPageNum = ref(1);
    let itemIDList = ref([]);
    let lowToHigh = ref(false);
    let pageSize = ref(5);
    let pageSizeOptions = ref([5, 7, 10, 20, 40, 50, 70, 100]);

    let curPageItems = ref([]);

    // ===============================================
    // computed
    // ===============================================
    // item 数量
    const numItems = computed({
      get: () => {
        return itemIDList.value.length;
      },
    });
    // ===============================================
    // methods
    // ===============================================
    async function currentPageItems(pageNum) {
      let n = pageSize.value;
      let l = numItems.value;
      let start = (pageNum - 1) * n;
      if (start < 0 || start >= l) return [];
      let end = Math.min(l, start + n);

      // console.log({ n: n, l: l, start: start, end: end, pageNum: pageNum });
      let res = [];
      let resPormises = [];
      for (let ele of itemIDList.value.slice(start, end)) {
        resPormises.push(props.fnGetItem(ele));
      }
      for (let ele of resPormises) {
        res.push(await ele);
      }
      // console.log(res);
      return res;
    }
    async function onCurrentChange(val) {
      curPageNum.value = val;
      curPageItems.value = await currentPageItems(curPageNum.value);
    }
    async function onSizeChange(val) {
      pageSize.value = val;
      curPageItems.value = await currentPageItems(curPageNum.value);
    }

    // ===============================================
    // 生命周期
    // ===============================================
    onMounted(async () => {
      let res = await props.fnGetIDList();
      itemIDList.value = res;
      curPageItems.value = await currentPageItems(curPageNum.value);
    });

    // ===============================================
    // 返回值
    // ===============================================
    return {
      //data
      curPageNum,
      itemIDList,
      lowToHigh,
      pageSize,
      pageSizeOptions,
      curPageItems,
      //computed
      numItems,
      // methods
      currentPageItems,
      onCurrentChange,
      onSizeChange,
    };
  },
};
</script>

<style scoped>
.list-area {
  background-color: white;
  padding-left: 20px;
  padding-right: 20px;
  height: 100%;
  width: calc(100% - 40px);
  overflow: auto;
}
#list-area-header {
  height: 30px;
  padding: 10px;
  color: grey;
  min-width: 670px;
}
#list-area-main {
  /* width: calc(100%); */
  height: calc(100% - 100px);
  overflow: auto;
  /* overflow-y: scroll; */
  min-width: 670px;
}
#list-area-footer {
  height: 30px;
  padding: 10px;
  color: grey;
  min-width: 670px;
}

.list-item-wrapper {
  display: inline-block;
}
</style>
